<template>
  <n-scrollbar style="max-height: 100vh; width: 100%; margin-left: 20px;margin-top: 20px;">
      <n-card size="small" class="column-card-left shadow-card">
          <template #header>
              <div style="display: flex; flex-direction: row; align-items: center">
                  <span class="tip-text">基本信息</span>
                  <icon-ri:product-hunt-line  class="card-icon"/> <!-- 使用 Font Awesome 图标库作为示例 -->
              </div>
          </template>
          <n-card class="custom-card">
              <div style="flex-wrap: wrap; display: flex; ">
                  <div style="width: 35%; margin-left: 15px;">
                      <img v-if="pictures.length > 0" style="width: 100%; height: 400px; cursor: pointer; object-fit: cover; margin-top: 10px;"
                               :src="pictures[0]" />
                      <img v-else src="../../images/noImg.png" style="width: auto; height: 40px; border: none;" />
                  </div>
                  <div style="width: 50%; margin-left: 5%">
                      <div>
                          <span style="font-weight: bold; font-size: x-large; color: #2a2a2a">{{productInfo.name}}</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">成本价：</span>
                          <span>{{productInfo.cost}}元</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">类别：</span>
                          <span>{{productInfo.categoryName}}</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">属性：</span>
                          <span>{{productInfo.attributeDescription}}</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">品牌：</span>
                          <span>{{productInfo.brandName}}</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">供应商：</span>
                          <span>{{productInfo.supplierName}}</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">产品状态：</span>
                          <n-tag :bordered="false" type="success" v-if="productInfo.status === '在售'">
                              {{productInfo.status}}
                          </n-tag>
                          <n-tag :bordered="false" type="info" v-else-if="productInfo.status === '开发中'">
                              {{productInfo.status}}
                          </n-tag>
                          <n-tag :bordered="false" type="error" v-else-if="productInfo.status === '下架'">
                              {{productInfo.status}}
                          </n-tag>
                          <span v-else>无</span>
                      </div>
                      <div class="info-div">
                          <span class="info-text">产品评分：</span>
                          <span>{{productInfo.score}}</span>
                      </div>
                      <div class="info-div" v-if="pictures.length > 0">
                          <span class="info-text">产品主图：</span>
                          <div  style="display: flex; padding-left: 3px; padding-right: 3px; border: none; overflow: hidden">
                              <n-image style="width: 35px; height: 30px; cursor: pointer;"
                                       :src="pictures[0]">
                              </n-image>
                          </div>
                      </div>
                  </div>
              </div>
          </n-card>
      </n-card>
      <n-card size="small" class="column-card-left shadow-card">
          <template #header>
              <div style="display: flex; flex-direction: row; align-items: center">
                  <span class="tip-text">产品描述</span>
                  <icon-material-symbols:description-outline-rounded  class="card-icon"/> <!-- 使用 Font Awesome 图标库作为示例 -->
              </div>
          </template>
          <n-input
              v-model:value="productInfo.type"
              type="textarea"
              placeholder=""
              maxlength="500"
              style="width: 90%;"
              class="gradient-text"
              :autosize="{
                minRows: 5,
                maxRows: 8
              }"
              show-count
              readonly
              mt-5
          />
      </n-card>
      <n-card size="small" class="column-card-left shadow-card" v-if="pictures.length > 2" >
          <template #header>
              <div style="display: flex; flex-direction: row; align-items: center">
                  <span class="tip-text">产品附图</span>
                  <icon-fa6-regular:images  class="card-icon"/> <!-- 使用 Font Awesome 图标库作为示例 -->
              </div>
          </template>
          <n-flex class="custom-card" mt-5>
                  <img
                      v-for="(picture, index) in pictures"
                      :key="index"
                      v-if="index !== 0"
                      class="carousel-img"
                      :src="picture"
                  />
          </n-flex>
      </n-card>
      <n-card size="small" class="column-card-left shadow-card">
          <template #header>
              <div style="display: flex; flex-direction: row; align-items: center">
                  <span class="tip-text">用户评价</span>
                  <icon-ic:outline-rate-review class="card-icon"/> <!-- 使用 Font Awesome 图标库作为示例 -->
              </div>
          </template>
          <n-tabs type="card">
              <n-tab-pane name="评价">
                  <n-card class="custom-card" style="margin-top: 0px; margin-bottom: 5px; width: 100%; "  shadow="never">
                      <div style="display: flex; flex-direction: row; height: 100%;">
                          <div style="display: flex; flex-direction: column; margin-left: 20px;">
                              <span style="font-size: 16px; font-family: '宋体', SimSun; text-align: center">累计评价</span>
                              <span style="font-weight: bold; font-size: 20px; font-family: Arial; color: #ff9f02; margin-top: 5px; text-align: center">{{product.reviewTimes}}</span>
                          </div>
                          <div style="width:1px; height: 48px;margin-left: 10px; background-color: #d5d5d5;"></div>
                          <div style="display: flex; flex-direction: row; margin-left: 20px; align-items: flex-end; margin-bottom: 15px;">
                              <span style="font-size: 16px; font-family: Arial;">与描述相符</span>
                              <div style="margin-left: 10px;">
                                  <n-rate
                                      :value="productInfo.score"
                                          disabled
                                          :show-score="false"
                                          text-color="#ff9900">
                                  </n-rate>
                              </div>
                              <span v-if="0 !== 0" style="font-size: 16px; font-family: Arial; color: #ff9f02;">暂无评分</span>
                          </div>
                      </div>
                  </n-card>
                  <span slot="label"><i class="el-icon-date"></i>宝贝评价</span>
                  <div style="padding: 20px 30px; border: 1px solid #dcdcdc; border-radius: 10px;">
                      <div v-for="(item, index) in reviews" :key="index" style="margin-bottom: 30px">
                          <div class="showOrderHeader" style="align-items: center">
                              <div style="width: 70%; display: flex; flex-direction: column">
                                  <div style="margin-left: 6px; width: 100%; margin-bottom: 5px; display: flex; flex-direction: row">
                                      <span style="font-size: 15px; font-weight: bold; margin-right: 15px;">{{ item.customerName }}</span>
                                      <n-rate
                                          :value="item.grade"
                                          disabled
                                          :show-score="false"
                                          text-color="#ff9900">
                                      </n-rate>
                                  </div>
                                  <div style="margin-left: 6px; width: 100%; margin-bottom: 5px; display: flex; flex-direction: row">
                                      <span>点赞数：</span>
                                      <span style="font-size: 15px; font-weight: bold; margin-left: 6px; text-align: left;">{{item.likeCount}}</span>
                                  </div>
                                  <span style="font-size: 13px; color: #aeaeae; margin-left: 6px; text-align: left; width: 100%; ">{{item.createTime}}</span>
                              </div>
                          </div>

                          <div style="width: 100%; padding: 20px 20px;border-radius: 15px; border: 1px solid #e7d09e; margin-top: 5px;">
                              <span style="width: 100%; font-family: 楷体; text-align: left; white-space: break-spaces; overflow: hidden; text-overflow: ellipsis;">{{ item.content }}</span>
                          </div>
                      </div>
                  </div>

              </n-tab-pane>
          </n-tabs>
      </n-card>
  </n-scrollbar>
</template>

<script setup>
import {useUserStore} from '@/store';
import {useRoute, useRouter} from 'vue-router';
import {NImage, NTag} from "naive-ui";
import api from "@/api/admin.js";
import {onMounted} from "vue";
const route = useRoute()
const product = JSON.parse(localStorage.getItem("product"))
const userStore = useUserStore()
const id=userStore.getId()
const router = useRouter()
const main = ref("")
const productInfo = {...product}
const pictures = ref([])
let pictureList = []
pictureList = []
if(productInfo.picture != null) {
    pictureList = productInfo.picture.split(',');
}
pictureList.map((picture) => {
    pictures.value.push(`/api/common/download?name=${picture}`)
})
const reviews = ref([])
const queryReviewList = async () => {
    try {
        const res = await api.findReviewsByProductId({
            params: {
                productId: product.id
            }
        })
        if(res.code === 200) {
            reviews.value = res.data
        }
        else {
            $message.error(res.message)
        }
    } catch (err) {
        $message.error("获取评价失败！")
    }
}
onMounted(()=>{
    queryReviewList()
})
</script>

<style scoped>
.gradient-text {
    font-family: 楷体;
    font-size: 17px;
    background-image: linear-gradient(to right, #e7b32f, #E74905);
    -webkit-background-clip: text;
    background-clip: text;
    color: #2a2a2a;
    margin-left: 30px;
    width: 80%;
}
.custom-card{
    border: 1px;
    width: 97%;
    align-snf: center;
}

n-row {
    margin-bottom: 20px;
    width: 100%;
}

n-col {
    border-radius: 4px;
}
.carousel-img {
    width: 22%;
    height: 250px;
    object-fit: cover;
    margin-left: 20px;
}
 .column-card-left {
     margin-top: 10px;
     margin-left: 20px;
     width: 97%;
     padding-bottom: 20px;
 }
.shadow-card {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: box-shadow 0.3s ease; /* 阴影变化的过渡效果 */
}
/* 当鼠标悬停在卡片上时，可以加深阴影效果以增加交互性 */
.shadow-card:hover {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
}
.tip-text {
    font-weight: 700;
    font-size: 17px;

}
.info-text {
    font-weight: 600;
    font-size: 14px;
    color: #6d717c;
}
.info-div {
    margin-top: 18px;
    display: flex;
    align-items: center;
}
.card-icon {
    margin-left: 5px;
    font-size: 18px;
}
</style>
